<template>
    <el-dialog
      v-model="dialogVisible"
      title="编辑脚本"
      :width="dailogWidth"
      :before-close="handleClose"
    >
      <el-form
        ref="formRef"
        :model="dataForm"
        status-icon
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        v-loading="loading"
      >
        <el-form-item label="版本号" prop="version" label-position="right">
          <el-input style="width: 90%" v-model="dataForm.version" placeholder="请输入版本号" :disabled="!!dataForm.id" :clearable="true"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark" label-position="right">
          <el-input style="width: 90%" v-model="dataForm.remark" placeholder="请输入备注" :clearable="true"/>
        </el-form-item>
        <el-form-item>
            <MonacoEditor :height="500" @lintError="handleErrors" v-model="dataForm.script" language="javascript" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer" v-loading="loading">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="submitForm">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </template>
  
  <script setup>
  import MonacoEditor from '@/components/MonacoEditor/MonacoEditor.vue';
  import { fileInfoUpload } from '@/utils/formRequest'
  import { getScriptInfo } from '@/api/facility/script.api'
  import useToggle from "@/hooks/useToggle";
  import useDailogWidth from "@/hooks/useDailogWidth";
  const dailogWidth = useDailogWidth("90%", "50%")
  const [loading, , setLoading] = useToggle();
  const [dialogVisible, , setDialogVisible] = useToggle();
  const emit = defineEmits(["refresh"]);
  const dataForm = ref({
    id: "",
    filename: "",
    version: "",
    remark: "",
    script: "",
  })
  const rules = {
    version: [{ required: true, message: '请输入版本号', trigger: 'blur' },],
  }
  const handleClose = () => {
    setDialogVisible(false)
  }
  
  const handleOpen = (row) => {
    setDialogVisible(true)
    nextTick(() => {
        resetForm()
        if(!row) return
        getScriptInfo({ id: row.id }).then(res => {
            dataForm.value.script = res.content
            dataForm.value.version = res.version
            dataForm.value.remark = res.remark
            dataForm.value.id = res.id
            dataForm.value.filename = res.filename
        })
    })
  }
  
  const submitForm = async () => {
    setLoading(true)
  
    const params = `?version=${dataForm.value.version}&remark=${dataForm.value.remark}`
    const fileData = new FormData()
    const utf8File = new File([dataForm.value.script], encodeURIComponent(dataForm.value.filename));
    fileData.append('file', utf8File)
  
    fileInfoUpload(`/device/script/add${params}`, fileData).then(res => {
      emit("refresh");
      setLoading(false)
      handleClose()
    })
  }
  
  const formRef = ref(null)
  const resetForm = () => {
    if (!formRef.value) return
    dataForm.value.id = void undefined
    dataForm.value.script = void undefined
    dataForm.value.version = void undefined
    dataForm.value.remark = void undefined
    dataForm.value.filename = void undefined
    formRef.value.resetFields()
  }
  
  defineExpose({
    handleOpen,
  })
  </script>
  